<template>
  <div class="product-list-wrap">
    <div class="product-list-content">
      <header class="category-header wrap">
        <i class="nbicon nbfanhui" @click="goBack"></i>
        <div class="header-search">
          <i class="nbicon nbSearch"></i>
          <input
            type="text"
            class="search-title"
            @mouseenter="textEnter"
            @mouseleave="textLeave"
            v-model="keyword"
          />
        </div>
        <span class="search-btn" @click="getSearch">搜索</span>
      </header>
      <van-tabs type="card" color="#1baeae" @click="changeTab">
        <van-tab title="推荐" name=""></van-tab>
        <van-tab title="新品" name="new"></van-tab>
        <van-tab title="价格" name="price"></van-tab>
      </van-tabs>
    </div>
    <van-pull-refresh
      v-model="refreshing"
      @refresh="onRefresh"
      class="product-list-refresh"
    >
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
        @offset="300"
      >
        <!-- <p v-for="item in list" :key="item">{{ item }}</p> -->
        <div
          class="product-item"
          v-for="(item, index) in productList"
          :key="index"
          @click="productDetail(item)"
        >
          <img :src="prefix(item.goodsCoverImg)" />
          <div class="product-info">
            <p class="name">{{ item.goodsName }}</p>
            <p class="subtitle">{{ item.goodsIntro }}</p>
            <span class="price">￥ {{ item.sellingPrice }}</span>
          </div>
        </div>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import { getQueryString } from "@/common/js/utils";
import { search } from "../service/good";
import { Toast } from "vant";
export default {
  data() {
    return {
      keyword: this.$router.query.keyword || "",
      searchBtn: false,
      seclectActive: false,
      refreshing: false,
      list: [],
      loading: false,
      finished: false,
      productList: [],
      totalPage: 0,
      page: 1,
      orderBy: "",
    };
  },
  mounted() {
    // window.addEventListener("scroll", this.pageScroll);
    // setTimeout(() => {
    //   this.isLoading = false;
    // }, 500);
    // this.init();
  },
  methods: {
    async init() {
      const { categoryId, from } = this.$router.query;
      if (!categoryId && !this.keyword) {
        this.finished = true;
        this.loading = false;
        return;
      }
      const {
        data,
        data: { list },
      } = await search({
        pageNumber: this.page,
        goodsCategoryId: categoryId,
        keyword: this.keyword,
        orderBy: this.orderBy,
      });
      this.productList = this.productList.concat(list);
      this.totalPage = data.totalPage;
      this.loading = false;
      if (this.page >= data.totalPage) this.finished = true;
    },
    goBack() {
      this.$router.go(-1);
    },
    productDetail(item) {
      this.$router.push({ path: `product/${item.goodsId}` });
    },
    textEnter() {},
    textLeave() {},
    getSearch() {
      this.onRefresh();
    },
    pageScroll(){
        let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
        screenTop > 50 ? this.seclectActive = true : this.seclectActive = false
    },
    onLoad(){
        if(!this.refreshing && this.page < this.totalPage){
            this.page = this.page + 1;
        }
        if(this.refreshing){
            this.productList = [];
            this.refreshing = false;
        }
        this.init()
    },
    onRefresh(){
        this.refreshing = true
      this.finished = false
      this.loading = true
      this.page = 1
      this.onLoad()
    },
    changeTab(name,title){
        this.orderBy = name
        this.onRefresh()
    }
  },
};
</script>

<style>
</style>